<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>商品添加</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">
    <!--必要样式-->
    <style type="text/css">
        body {
            background-color: #EFEFEF;
        }

        .am-header-default {
            background-color: #ED6D00;
        }

        input[type='text'] {
            margin-left: 10px;
            border: none;
            outline: none;
            font-size: 12px;
            line-height: 44px;
            width: 70%;
        }

        .am-btn-default {
            border: none;
        }

        .am-selected {
            width: 65%;
            height: 100%;

        }

        .am-btn {
            padding: .8em 1em;
        }

        .am-selected-list li.am-checked .am-icon-check {
            color: #00ff00;
        }

        .am-modal-dialog {
            width: 98%;
        }

        .state2 {

            display: inline-block;
            border-radius: 5px;
            margin-top: 16px;
            padding: 5px 10px;
            border: 1px solid #F7BD8B;
            color: #F7BD8B;
            line-height: 1em
        }

        .btn-upload {
            width: 100%;
            height: 32px;
            position: relative;
            margin-bottom: 10px;
        }

        .btn-upload a {
            display: block;
            width: 60px;
            height: 60px;
            /*line-height: 18px;*/
            padding: 6px 0;
            text-align: center;
            color: #4c4c4c;
            background: #fff;
            border: 1px solid #cecece;
        }

        .btn-upload input {
            /*width: 106px;*/
            height: 38px;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 1;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            opacity: 0;
            cursor: pointer;
        }

        .rows {
            line-height: 46px;
            border-bottom: 1px solid #EFEFEF;
        }

        .rows span {
            font-size: 18px;
        }

        .plus {
            color: #ED6D00;
            font-size: 150%;
            line-height: 20px;
            vertical-align: middle
        }

        .upload-btn {
            display: inline-block;
            color: #999;
            font-size: 16px;
            border: 1px solid #666;
            border-radius: 5px;
            padding: 6px 10px;
            line-height: 1em
        }

        .save-btn {
            display: block;
            background: #ED6D00;
            color: #FFF;
            font-size: 18px;
            line-height: 46px;
            margin-bottom: 5px;
            border-radius: 10px
        }
    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a href="${pageContext.request.contextPath}/clientShopHome/goManage" class="">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            商品添加
        </a>
    </h1>
</header>
<div class="am-g whiteBg">
    <div class="am-u-sm-12 rows" style="">
        <span>商品名称</span><input type="text" placeholder="请输入商品名" id="name">
    </div>
    <div class="am-u-sm-12 am-padding-right-0 rows" id="typelist">
        <span>选择分类</span>
        <select data-am-selected id="myselect">
            <option :value="item.id" v-for="item in items">{{item.categoryName}}</option>
        </select>
        <a href="${pageContext.request.contextPath}/clientShopHome/addClass"><span class="am-icon-plus plus"
                                                                                   style="font-size: 150%"></span></a>
    </div>
    <div class="am-u-sm-12 rows" id="price">
        <span>价格</span><input type="text" placeholder="请输入价格" id="mprice">
    </div>
    <div class="am-u-sm-12 rows" id="num">
        <span>库存</span><input type="text" placeholder="请输入库存" id="mnum">
    </div>
    <div class="am-u-sm-12 am-text-center rows" id="addspec" style="color: #EF7C1A;">
        <span style="font-size: 20px;">+</span><span>规格添加</span>
    </div>
    <div class="am-u-sm-12" style="" id="standard">
        <div style="width: 100%;padding:10px 0;border-bottom: 1px solid #EFEFEF;" v-for="item in standardlist">
            {{item.propertyName}} / 库存:{{item.quantity}} /￥{{item.propertyValue}} <span style="margin-left: 20px;"><i
                v-on:click="sdelete(item)" class="am-icon-trash" style="color: #ccc"></i></span>
        </div>
    </div>
    <div class="am-u-sm-12 rows" style="padding-bottom: 20px;">
        <div class="control-group js_uploadBox">
            <div class="am-u-sm-12 am-padding-0 am-text-center">
                <div class="btn-upload">
                    <!--<a href="javascript:void(0);"><i class="am-icon-camera am-icon-sm" style="color:rgba(0,0,0,0.4)"></i><span class="js_uploadText" style="font-size:24px"></span></a>-->
                    <span class="upload-btn" style="font-size: 16px;">上传图片</span>
                    <input class="js_upFile" type="file" id="pLicense" name="image">
                </div>
                <div class="js_showBox am-text-center"></div>
            </div>
        </div>
    </div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog">
        <div class="am-u-sm-12 rows" style="border-bottom: 1px solid #B9B9B9;">
            <span>价格</span><input type="text" placeholder="请输入价格" id="sprice">
        </div>
        <div class="am-u-sm-12 rows" style="border-bottom: 1px solid #B9B9B9;">
            <span>库存</span><input type="text" placeholder="请输入库存" id="snum">
        </div>
        <div class="am-u-sm-12 rows" style="border-bottom: 1px solid #B9B9B9;">
            <span>规格名称</span><input type="text" placeholder="请输入规格名称" id="sname">
        </div>
        <div class="am-u-sm-12 rows" style="border-bottom: 1px solid #B9B9B9;" onclick="save()">
            <a href="javascript:void(0);" data-am-modal-close><span class="state2">保存</span></a>
        </div>

    </div>
</div>


<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default " id="" onclick="sub()">
    <ul class="am-navbar-nav am-cf am-avg-sm-4 " style="background: #efefef">
        <a href="#"><span class="save-btn">保存</span></a>

    </ul>
</div>

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.uploadView.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/ajaxfileupload.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script type="text/javascript">
    $(".js_upFile").uploadView({
        uploadBox: '.js_uploadBox',//设置上传框容器
        showBox: '.js_showBox',//设置显示预览图片的容器
        width: 300, //预览图片的宽度，单位px

        allowType: ["gif", "jpeg", "jpg", "bmp", "png"], //允许上传图片的类型
        maxSize: 2, //允许上传图片的最大尺寸，单位M
        success: function (e) {
            $(".btn-upload").hide();

        },
        error: function () {
            alert(1);
        }
    });
    $(function () {
        $('#addspec').click(function () {
            $('#my-alert').modal();
        });
    });
    var typelist = new Vue({
        el: "#typelist",
        data: {
            items: []
        }
    });
    $.ajax({
        type: "get",
        async: false,
        url: '${pageContext.request.contextPath}/clientCategory/findAll',
        dataType: 'json',
        success: function (data) {

            if (data.success == true && data.code == 200) {
                typelist.items = data.obj;
            }
        },
        error: function () {
            layer.msg('网络超时');
        }

    });


    var standardlist = [];
    var standard = new Vue({
        el: "#standard",
        data: {
            standardlist: standardlist
        },
        methods: {
            sdelete: function (obj) {
                console.log(obj);
                $.each(this.standardlist, function (i, n) {
                    if (n.propertyName == obj.propertyName && n.propertyValue == obj.propertyValue && n.quantity == obj.quantity) {
                        standardlist.splice(i, 1);
                        return;
                    }
                });
            }
        }
    });
    var statu = false;
    function save() {
        $('#price').hide();
        $('#num').hide();
        statu = true;
        var item = {};
        item.propertyName = $("#sname").val();
        item.quantity = $("#snum").val();
        item.propertyValue = $("#sprice").val();
        $("#sname").val("");
        $("#snum").val("");
        $("#sprice").val("");
        standardlist.push(item);
    }
    function toString(obj) {
        var str = "";
        $.each(obj, function (i, n) {
            str += n.propertyName;
            str += ",";
            str += n.quantity;
            str += ",";
            str += n.propertyValue;
            str += "#";
        });
        return str;
    }
    function sub() {
        var json = {};
        json.name = $("#name").val();
        json.categoryId = $("#myselect").val();
        if ($("#pLicense").val() == "") {
            layer.msg("请上传图片");
            return;
        }
        if (json.name == "") {
            layer.msg("请填写商品名称");
            return;
        }
        if (json.categoryId == "") {
            layer.msg("请选择分类");
            return;
        }

        if (statu == 0) {
            var item = {};
            item.propertyName = '默认';
            item.quantity = $("#mnum").val();
            item.propertyValue = $("#mprice").val();
            if (item.propertyValue == "") {
                layer.msg("请填写价格！");
                return;
            }
            if (item.quantity == "") {
                layer.msg("请填写数量！");
                return;
            }
            standardlist.push(item);
        }
        json.details = toString(standardlist);
        // json.details=JSON.stringify(standardlist);

        $.ajaxFileUpload({
            url: '${pageContext.request.contextPath}/clientGoods/add',//用于文件上传的服务器端请求地址
            secureuri: false,//是否启用安全提交，一般设置为false
            data: json,
            traditional: true,
            fileElementId: 'pLicense',//文件上传控件的id
            dataType: 'html',//服务器返回的数据类型
            success: function (d) {
//                console.info(d);
//                var data = jQuery.parseJSON(d);
//                if (data.success) {
//
//                } else {
//                    layer.msg(data.msg);
//                }
                setInterval(function () {
                    window.location.href = "${pageContext.request.contextPath}/clientShopHome/goManage"
                }, 2000);
                layer.msg('添加成功,2秒后自动返回。');

            },
            error: function (d, status, e) {
//                console.info(d);
//                var data = jQuery.parseJSON(d);
//                console.info(data.msg);
//                layer.msg("网络超时");
                setInterval(function () {
                    window.location.href = "${pageContext.request.contextPath}/clientShopHome/goManage"
                }, 2000);
                layer.msg('添加成功,2秒后自动返回。');
            }
        });
    }
</script>


</body>

</html>
